<template>

	<view class="mobile">
		<view>
			<input class="uni-input" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" placeholder="请输入手机号"
				confirm-type="done" @blur="blur" type="tel" placeholder-style="color: #F5F5F5;" v-model="mobile" />
		</view>
		<button form-type="submit" @tap="submitForm" class="uni-buttons">保存</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		editUserInfo
	} from '@/api/api'
	export default {
		data() {
			return {
				mobile: ''
			}
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			...mapMutations('user', ['changeMobile']),
			blur(e) {
				console.log(e)
				this.mobile = e.detail.value
			},
			getPhoneNumber(e) {
				console.log(e)
			},
			submitForm(e) {
				if (!this.mobile) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
				let params = {
					mobile: this.mobile,
					nickname: this.user.nickname,
					avatar: this.user.avatar
				}
				console.log(params)
				editUserInfo(params).then(res => {
					if (res.code == 1) {
						this.changeMobile(this.mobile)
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.mobile {
		position: relative;
		padding: 30upx;
		height: 100vh;

		.uni-input {
			font-size: 26upx;
			background-color: #F5F5F5;
			border-radius: 6px;
			padding: 24upx 20upx;
		}

		.uni-buttons {
			position: absolute;
			bottom: 180upx;
			left: 0;
			right: 0;
			background-color: #359BEF;
			color: #ffffff;
			border-radius: 40px;
			margin: 0 30upx;
			font-size: 30upx;
		}
	}
</style>